<template>
  <div class="max-w-md p-2">
    <div class="mb-2 bg-gray-700 rounded px-2 py-1 leading-none">
      <i class="fas fa-info-circle"></i> {{ t("settings.clear_hotkey") }}
    </div>
    <div class="mb-8 flex flex-col">
      <label class="mb-1">{{ t("price_check.name") }}</label>
      <div class="flex flex-col gap-y-2 pl-4">
        <div class="flex gap-x-2">
          <label class="flex-1 text-gray-500">{{
            t("price_check.hotkey")
          }}</label>
          <div class="flex w-48 gap-x-1">
            <button
              :class="{
                'border-transparent': priceCheckHotkeyHold !== 'Ctrl',
                'line-through': priceCheckHotkey === null,
              }"
              @click="
                priceCheckHotkeyHold = 'Ctrl';
                priceCheckHotkey = null;
              "
              class="rounded px-1 bg-gray-900 border leading-none"
            >
              Ctrl
            </button>
            <button
              :class="{
                'border-transparent': priceCheckHotkeyHold !== 'Alt',
                'line-through': priceCheckHotkey === null,
              }"
              @click="
                priceCheckHotkeyHold = 'Alt';
                priceCheckHotkey = null;
              "
              class="rounded px-1 bg-gray-900 border leading-none"
            >
              Alt
            </button>
            <span class="flex-1 text-center">+</span>
            <hotkey-input v-model="priceCheckHotkey" class="w-20" no-mod-keys />
          </div>
        </div>
        <div class="flex gap-x-2">
          <label class="flex-1 text-gray-500">{{
            t("price_check.hotkey_locked")
          }}</label>
          <hotkey-input v-model="priceCheckHotkeyLocked" class="w-48" />
        </div>
      </div>
    </div>
    <div class="mb-4 flex">
      <label class="flex-1"
        >{{ t("settings.overlay") }}
        <span class="text-red-500 text-lg leading-none">*</span></label
      >
      <hotkey-input required v-model="overlayKey" class="w-48" />
    </div>
    <div class="mb-4 flex">
      <label class="flex-1">{{ t("map_check.name") }}</label>
      <hotkey-input v-model="itemCheckKey" class="w-48" />
    </div>
    <div class="mb-4 flex">
      <label class="flex-1">{{ t("item.info") }}</label>
      <hotkey-input v-model="itemCheckKey" class="w-48" />
    </div>
    <div class="mb-8 flex">
      <label class="flex-1">{{ t("settings.delve_grid") }}</label>
      <hotkey-input v-model="delveGridKey" class="w-48" />
    </div>
    <div class="mb-8 flex">
      <label class="flex-1">{{ t("settings.stash_scroll") }}</label>
      <div class="flex gap-x-4">
        <ui-radio v-model="stashScroll" :value="true" class="font-poe"
          >Ctrl + MouseWheel</ui-radio
        >
        <ui-radio v-model="stashScroll" :value="false">{{
          t("Disabled")
        }}</ui-radio>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useI18n } from "vue-i18n";
import UiRadio from "@/web/ui/UiRadio.vue";
import { configProp, configModelValue, findWidget } from "./utils";
import { PriceCheckWidget, DelveGridWidget } from "@/web/overlay/interfaces";
import { ItemCheckWidget } from "../item-check/widget.js";
import HotkeyInput from "./HotkeyInput.vue";

export default defineComponent({
  name: "settings.hotkeys",
  components: { HotkeyInput, UiRadio },
  props: configProp(),
  setup(props) {
    const { t } = useI18n();

    return {
      t,
      stashScroll: configModelValue(() => props.config, "stashScroll"),
      delveGridKey: configModelValue(
        () => findWidget<DelveGridWidget>("delve-grid", props.config)!,
        "toggleKey",
      ),
      itemCheckKey: configModelValue(
        () => findWidget<ItemCheckWidget>("item-check", props.config)!,
        "hotkey",
      ),
      overlayKey: configModelValue(() => props.config, "overlayKey"),
      priceCheckHotkeyHold: configModelValue(
        () => findWidget<PriceCheckWidget>("price-check", props.config)!,
        "hotkeyHold",
      ),
      priceCheckHotkey: configModelValue(
        () => findWidget<PriceCheckWidget>("price-check", props.config)!,
        "hotkey",
      ),
      priceCheckHotkeyLocked: configModelValue(
        () => findWidget<PriceCheckWidget>("price-check", props.config)!,
        "hotkeyLocked",
      ),
    };
  },
});
</script>
